<template>
    <div class="focusProfileBar">
        <div class="nickname">{{ nickname }}</div>
        <div class="userdata">
            <div class="orderCountBar color_hover" @click="routToPage('order')">
                <div class="displayCenter">{{ orderNum }}</div>
                <div class="userdata_ch_text">订单数</div>
            </div>
        </div>
        <div class="function_bar" @click="routToPage('personal')">
            <div class="function_bar_text">
                <el-icon :size="20"><User /></el-icon>
                个人中心
            </div>
            <el-icon><ArrowRightBold /></el-icon>
        </div>
        <div class="function_bar" @click="logout">
            <div class="function_bar_text" >
                <el-icon :size="20"><Expand /></el-icon>
                退出登陆
            </div>
            <el-icon><ArrowRightBold /></el-icon>
        </div>

    </div>
</template>

<script setup>
import { ref } from 'vue';
import { User, ArrowRightBold, Expand } from '@element-plus/icons-vue';
import { useRouter,useRoute } from 'vue-router'
import { UserLogout } from '@/apis/banner.js'
import { ElMessage } from "element-plus";
import { userInfoState } from '@/stores/userInfoState.js'
import { getUserProfile } from '@/apis/user'
import {listOrder} from "@/apis/order.js";

const userInfo = userInfoState()

const router = useRouter();

const nickname = ref('未知')
const orderNum = ref(0)

const logout = async () => {
    await UserLogout();
    ElMessage.success("退出登陆成功")
    location.reload();
}

const routToPage = (str) =>{
  switch (str){
    case 'order':  router.push({ name: 'order' });break;
    case 'personal': router.push({ name: 'personal' });break;
  }

}

const getData = async () => {
  getUserProfile().then(res => {
    userInfo.setEmail(res.data.email)
    userInfo.setPhone(res.data.phonenumber)
    userInfo.setNickname(res.data.nickName)
    userInfo.setUserId(res.data.userId)
    userInfo.setUsername(res.data.userName)
    nickname.value = res.data.nickName
  })

  listOrder().then(res => {
    orderNum.value = res.total
  })
}

getData()

</script>

<style scoped>
.focusProfileBar{
  background-color: #f5f5f5;
  width:40vh;
  min-height:35vh;
  border-radius: 4px;
  position: relative;
  top:2.5vh;
  border: 1px solid #eeeeee;
  box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.1);

  -webkit-user-select: none; /* Safari */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* IE10+/Edge */
        user-select: none; /* Standard syntax */
}
.focusProfileBar::before {
  content: '';
  position: absolute;
  top: 0vh; /* 定位到div的中间 */
  left: 50%; /* 定位到div的中间 */
  transform: translate(-50%, -50%) rotate(45deg); /* 居中并旋转 */
  width: 2vh; /* 箭头宽度 */
  height: 2vh; /* 箭头高度 */
  background-color: #f5f5f5; /* 箭头颜色 */
  border-top: 1px solid #eeeeee;
  border-right: 1px solid #eeeeee;
  border-left: 2px solid #f5f5f5; /* 可选，用于形成更立体的箭头效果 */
  border-bottom: 2px solid #f5f5f5; /* 可选，用于形成更立体的箭头效果 */
}
.nickname{
    margin-top: 3%;
    font-size: 26px;
    height: 7vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.userdata{
    height: 10vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 18px;
    font-family: 'consolas',serif;
}
.userdata_ch_text{
    font-size: 14px;
}
.function_bar{
    height: 7vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    padding: 0 2vh 0 2vh;
    margin-top: 1vh;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
    border-radius: 4px;
}
.function_bar:hover{
    background-color: #dddddd;
}
.function_bar_text{
    width: 37%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.color_hover{
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}
.color_hover:hover{
    color:#79bbff;
}
</style>
